<template>
    <div id="adminList">
        <div v-if="which == 'list'">
            <el-table
                :data="
                    admins.filter(
                        (data) =>
                            !search ||
                            data.name
                                .toLowerCase()
                                .includes(search.toLowerCase())
                    )
                "
                style="width: 100%"
            >
                <el-table-column label="Account" prop="account">
                </el-table-column>
                <el-table-column label="Password" prop="password">
                </el-table-column>
                <el-table-column label="status">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="statusChoose(scope.row)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column align="right">
                    <template slot="header">
                        <!--slot-scope="scope" -->
                        <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"
                        />
                    </template>
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)"
                            >Edit</el-button
                        >
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                            >Delete</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="edit" v-if="which == 'edit'">
            <h3>编辑</h3>
            <el-input v-model="account" placeholder="id"></el-input>
            <el-input v-model="password" placeholder="password"></el-input>
            <el-button @click="update">确认修改</el-button>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
//引入辅助函数
const { mapActions, mapState } = createNamespacedHelpers("admins");
export default {
    data() {
        return {
            //显示内容
            which: "list",
            //搜索
            search: "",

            _id: "",
            account: "",
            password: "",
        };
    },
    mounted() {
        this.getAdmins();
    },
    computed: {
        //adminData
        ...mapState(["admins"]),
    },
    methods: {
        // get  update
        ...mapActions([
            "getAdmins",
            "editAdmins",
            "deleteAdmins",
            "switchAdmins",
        ]),
        //update
        handleEdit(index, row) {
            this.which = "edit";
            this._id = row._id;
            this.account = row.account;
            this.password = row.password;
        },
        update() {
            this.editAdmins({
                _id: this._id,
                account: this.account,
                password: this.password,
            });
            this.which = "list";
        },
        //delete
        async handleDelete(index, row) {
            console.log(index, row);
            const data = await this.deleteAdmins(row);
            if (data.status) {
                this.deleteSuccess()
                this.getAdmins();
            } else {
                console.log("删除失败");
            }
        },
        //设置是否登录状态
        async statusChoose(status) {
            const data = await this.switchAdmins({
                _id: status._id,
                status: status.status,
            });
            if (data.status) {
                console.log(data);
            }
        },
        //删除成功提示
        deleteSuccess() {
            this.$notify.error({
                message: "管理员已删除",
            });
        },
    },
};
</script>

<style lang="scss">
#adminList {
    .edit {
        text-align: center;
        background: white;
        margin: auto;
        width: 800px;
        box-shadow: 0px 0px 4px 2px rgba($color: #000000, $alpha: 0.4);
        padding: 10px 20px;
        .el-input {
            padding: 6px 0;
        }
    }
}
</style>